<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性与方法</title>
	<!-- Vue.js所在路径 -->
	<script src="lib/js/vue.js"></script>
	<!-- 自己调试的代码区域 -->
	<script>
		window.onload = function() {
			// 每个Vue实例都会代理其 data 
			var data = { a: 1 };		// data数据可以通过Ajax从后端接口获取
			var vm = new Vue({
				el: '#example',
				data: data
			});
			// 调试信息
			console.log("vm.a is " + vm.a);
			console.log("data.a is " + data.a);	// 应该与vm.a一致
			console.log(vm.a === data.a); // -> true

			// Vue提供的属性
			var vm = new Vue({
			  el: '#example-1',
			  data: data
			});
			// 调试信息
			console.log(vm.$data === data); // -> true
			console.log(vm.$el === document.getElementById('example')); // -> true

			// Vue提供的方法
			vm.$watch('a', function (newVal, oldVal) {
				// 这个回调将在 `vm.a`  改变后调用
				 // vm.a = "$" + newVal;
				 console.log("oldVal is " + oldVal);
				 console.log("newVal is " + newVal);
			});
		}
	</script>
</head>
<body>
	<div id="example">
	  <p>Hello {{ a }}!</p>            <!-- 为什么不是 vm.a || data.a -->
	</div>
	<div id="example-1">
		{{{ a }}} <br/>					<!-- {{{ }}} {{ }}的区别在后边数据绑定的插值会提及-->
		<input type="text" v-model="a" />			<!-- 在输入框注入<button onclick="alert('hello world')">click</button>，点击按钮有惊喜-->
	</div>
</body>
</html>